<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<template>
    <el-menu>
        <template v-for="im, ix in settings.data" :key="ix">
            <el-menu-item index="2" @click="execute(im.fn)">
                <el-icon v-html="im.icon" />
                <span>{{ im.name }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup>
const {
    settings,
} = defineProps([
    'settings'
])

function execute(fn) {
    fn()
    // eslint-disable-next-line vue/no-mutating-props
    settings.is = false
}
</script>

<style scoped>
.el-menu {
    border: none;

    .el-menu-item {
        height: 42px;
        padding: 0 20px 0 15px;
    }
}
</style>